
<template>
  <div>
    <!-- 查询列表页面 -->
    <div>
      <el-form ref="selectData" :model="selectData" size="mini">
        <div style="display: flex; margin: 20px 0 10px 20px">
          <el-form-item
            label="卡名称"
            style="display: flex; margin: 0 30px 0 0"
          >
            <el-input v-model="selectData.cardName"></el-input>
          </el-form-item>
          <el-form-item
            label="状态："
            style="display: flex; margin: 0 30px 0 0"
          >
            <el-radio v-model="selectData.cardStatus" label="yes"
              >启用</el-radio
            >
            <el-radio v-model="selectData.cardStatus" label="no">停用</el-radio>
          </el-form-item>

          <el-button
            size="mini"
            type="primary"
            @click="immediatelyquery"
            style="width: 100px"
            >查询</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="imediateadd"
            style="width: 100px"
            >添加</el-button
          >
        </div>
      </el-form>
      <el-table
        :data="tableData"
        class="account_table"
        size="small"
        @toggleRowSelection="toggleRowSelection(row, selected)"
        border
        :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }"
        style="margin: 40px 0 10px 20px; width: 95%"
      >
        <el-table-column
          prop="cardName"
          label="会员卡名称"
          align="cneter"
        ></el-table-column>
        <el-table-column prop="cardPrice" label="会员卡售价"> </el-table-column>
        <el-table-column prop="continuousCardPrice" label="连续包年售价">
        </el-table-column>
        <el-table-column prop="cardGrade" label="会员卡等级"> </el-table-column>
        <el-table-column prop="cardValidDate" label="会员卡有效期">
        </el-table-column>
        <el-table-column prop="cardBackdropImage" label="会员卡背景图">
          <template slot-scope="scope">
            <img
              :src="baseURL + scope.row.cardBackdropImage"
              width="40"
              height="40"
            />
          </template>
        </el-table-column>
        <el-table-column prop="cardCoverImage" label="会员卡封面图">
          <template slot-scope="scope">
            <img
              :src="baseURL + scope.row.cardCoverImage"
              width="40"
              height="40"
            />
          </template>
        </el-table-column>
        <el-table-column prop="cardIntroduce" label="会员卡介绍">
        </el-table-column>
        <el-table-column prop="cardNameFontColor" label="卡名称字体颜色">
        </el-table-column>
        <el-table-column prop="cardOtherFontColor" label="卡其他小字字体颜色">
        </el-table-column>
        <el-table-column prop="gradeBackdropColor" label="当前等级背景颜色">
        </el-table-column>
        <el-table-column prop="gradeFontColor" label="当前等级字体颜色">
        </el-table-column>
        <el-table-column prop="cardStatus" label="状态">
          <template slot-scope="scope">
            <template v-if="scope.row.cardStatus == 'yes'">启用</template>
            <template v-if="scope.row.cardStatus == 'no'">未启用</template>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="orderId" label="操作人"> </el-table-column> -->
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="editMethod(scope.row)"
              >修改</el-button
            >
            <el-button type="primary" size="mini" @click="delmethod(scope.row)"
              >删除</el-button
            >
            <el-button type="primary" size="mini" @click="pagehref(scope.row)"
              >维护卡权益</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加--修改和页面 -->
    <el-dialog
      title="会员卡"
      :visible.sync="centerDialogVisible"
      width="56%"
      center
      :close-on-click-modal="false"
    >
      <el-form
        ref="addfrom"
        :model="addfrom"
        :rules="addfromrules"
        size="mini"
        class="addfrom"
      >
        <div style="display: flex">
          <el-form-item
            prop="cardName"
            label="会员卡名称"
            style="display: flex; margin: 20px 30px 0 20px"
          >
            <el-input v-model="addfrom.cardName"></el-input>
          </el-form-item>
          <el-form-item
            prop="cardIntroduce"
            label="会员卡介绍"
            style="display: flex; margin: 20px 30px 0 20px"
          >
            <el-input v-model="addfrom.cardIntroduce"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item
            prop="cardPrice"
            label="会员卡售价"
            style="display: flex; margin: 20px 30px 0 20px"
          >
            <el-input v-model="addfrom.cardPrice"></el-input>
          </el-form-item>
          <el-form-item
            prop="continuousCardPrice"
            label="连续包年售价"
            style="display: flex; margin: 20px 30px 0 20px"
          >
            <el-input v-model="addfrom.continuousCardPrice"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item
            prop="cardGrade"
            label="会员卡等级(数字)"
            style="display: flex; margin: 20px 30px 0 20px"
          >
            <el-input v-model.number="addfrom.cardGrade"></el-input>
          </el-form-item>
          <!-- <el-form-item
            prop="cardValidDate"
            label="会员卡有效期(数字，天数)"
            style="display: flex; margin: 20px 30px 0 20px"
          >
            <el-input v-model.number="addfrom.cardValidDate"></el-input>
          </el-form-item> -->
        </div>

        <div style="display: flex">
          <el-form-item
            prop="cardNameFontColor"
            label="卡名称字体颜色"
            style="display: flex; margin: 20px 30px 0 20px"
          >
            <div style="display: flex">
              <el-input v-model="addfrom.cardNameFontColor" disabled></el-input>
              <el-color-picker v-model="addfrom.cardNameFontColor">
              </el-color-picker>
            </div>
          </el-form-item>
          <el-form-item
            prop="cardOtherFontColor"
            label="卡其他小字字体颜色"
            style="display: flex; margin: 20px 30px 0 20px"
          >
            <div style="display: flex">
              <el-input
                v-model="addfrom.cardOtherFontColor"
                disabled
              ></el-input>
              <el-color-picker v-model="addfrom.cardOtherFontColor">
              </el-color-picker>
            </div>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item
            prop="gradeBackdropColor"
            label="当前等级背景颜色"
            style="display: flex; margin: 20px 30px 0 20px"
          >
            <div style="display: flex">
              <el-input
                v-model="addfrom.gradeBackdropColor"
                disabled
              ></el-input>
              <el-color-picker v-model="addfrom.gradeBackdropColor">
              </el-color-picker>
            </div>
          </el-form-item>
          <el-form-item
            prop="gradeFontColor"
            label="当前等级字体颜色"
            style="display: flex; margin: 20px 30px 0 20px"
          >
            <div style="display: flex">
              <el-input v-model="addfrom.gradeFontColor" disabled></el-input>
              <el-color-picker v-model="addfrom.gradeFontColor">
              </el-color-picker>
            </div>
          </el-form-item>
        </div>

        <div style="display: flex">
          <el-form-item
            prop="cardStatus"
            label="状态："
            style="display: flex; margin: 20px 30px 0 20px"
          >
            <el-radio v-model="addfrom.cardStatus" label="yes">启用</el-radio>
            <el-radio v-model="addfrom.cardStatus" label="no">未启用</el-radio>
          </el-form-item>
          <el-form-item
            prop="giveawayStatus"
            label="是否为体验会员卡："
            style="display: flex; margin: 20px 30px 0 20px"
          >
            <el-radio v-model="addfrom.giveawayStatus" label="yes">是</el-radio>
            <el-radio v-model="addfrom.giveawayStatus" label="no">否</el-radio>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item
            label="会员卡封面图"
            style="display: flex; margin: 20px 30px 0 20px"
          >
            <span style="color: red; font-size: 12px">(jpg\png)</span>

            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :action="imgHttpUrl"
              :on-success="cardCoverImageSuccess"
              list-type="picture-card"
              :on-exceed="handleExceed"
              :headers="header"
              :data="multipartFile"
            >
              <!-- :before-upload="beforeAvatarUpload" -->
              <img
                v-if="addfrom.cardCoverImage"
                :src="addfrom.cardCoverImage"
                class="avatar"
              />
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>

          <el-form-item
            label="会员卡背景图:"
            style="display: flex; margin: 20px 30px 0 20px"
          >
            <span style="color: red; font-size: 12px">(jpg\png)</span>
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :action="imgHttpUrl"
              :on-success="cardBackdropImageSuccess"
              list-type="picture-card"
              :on-exceed="handleExceed"
              :headers="header"
              :data="multipartFile"
            >
              <img
                v-if="addfrom.cardBackdropImage"
                :src="addfrom.cardBackdropImage"
                class="avatar"
              />
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </div>

        <div style="display: flex; margin-left: 180px; margin-top: 50px">
          <el-button
            size="mini"
            type="primary"
            @click="save('addfrom')"
            style="width: 100px; margin-left: 180px"
            >保存
          </el-button>
          <el-button
            size="mini"
            type="primary"
            @click="centerDialogVisible = false"
            style="width: 100px; margin-left: 20px"
            >取消
          </el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog title="提示" :visible.sync="delDialogVisible" width="30%" center>
      <span>确认删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delCardRightd">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 维护权益 -->
    <el-dialog
      title="维护卡权益"
      :visible.sync="outerVisible"
      center
      :inline="true"
      :close-on-click-modal="false"
    >
      <el-dialog
        :close-on-click-modal="false"
        width="60%"
        title="新增卡权益"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-form
          ref="addfromson"
          label-width="140px"
          :model="addfromson"
          :rules="addfromsonrules"
          size="mini"
          class="addfrom"
        >
          <div style="display: flex">
            <el-form-item label="权益名称：" prop="rightdetailName">
              <el-input size="mini" v-model="addfromson.rightdetailName">
              </el-input>
            </el-form-item>
            <el-form-item label="权益小标题：" prop="rightdetailTitle">
              <el-input
                size="mini"
                v-model="addfromson.rightdetailTitle"
              ></el-input>
            </el-form-item>
          </div>
          <el-form-item label="权益介绍：" prop="rightdetailIntroduce">
            <el-input
              size="mini"
              style="width: 400px"
              v-model="addfromson.rightdetailIntroduce"
            ></el-input>
          </el-form-item>
          <el-form-item label="使用说明：" prop="rightdetailRule">
            <el-input
              size="mini"
              style="width: 400px"
              v-model.number="addfromson.rightdetailRule"
            ></el-input>
          </el-form-item>
          <div style="display: flex">
            <el-form-item label="单位：">
              <el-radio v-model="addfromson.unit" label="次"></el-radio>
              <el-radio v-model="addfromson.unit" label="张"></el-radio>
            </el-form-item>
            <el-form-item label="次数(-1 无限次)">
              <el-input
                style="width: 194px"
                v-model.number="addfromson.number"
              ></el-input>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item label="权益类型：" prop="rightdetailType">
              <el-select
                v-model="addfromson.rightdetailType"
                clearableplaceholder="请选择"
                @change="watchrightdetailStatus"
              >
                <el-option
                  v-for="item in rightdetailList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- <el-radio
                @change="watchrightdetailStatus"
                v-model="addfromson.rightdetailType"
                label="coupon"
                >优惠卷</el-radio
              >
              <el-radio
                @change="watchrightdetailStatus"
                v-model="addfromson.rightdetailType"
                label="service"
                >服务卷</el-radio
              >
              <el-radio
                @change="watchrightdetailStatus"
                v-model="addfromson.rightdetailType"
                label="insurance"
                >保险</el-radio
              > -->
            </el-form-item>
            <el-form-item
              label="优惠卷编号："
              v-if="addfromson.rightdetailType == 'coupon'"
              prop="relatedId"
            >
              <el-select
                v-model="addfromson.relatedId"
                clearableplaceholder="请选择"
              >
                <el-option
                  v-for="item in relatedIdList"
                  :key="item.id"
                  :label="item.couponName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <!-- <el-form-item
              label="服务卷编号："
              v-if="addfrom.rightdetailType == 'service'"
            >
              <el-select v-model="addfromson.relatedId" placeholder="请选择">
                <el-option
                  v-for="item in serviceList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item
              label="保险编号："
              v-if="addfromson.rightdetailType == 'insurance'"
              prop="relatedId"
            >
              <el-select
                clearable
                v-model="addfromson.relatedId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in correspondList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>

          <div style="display: flex">
            <el-form-item label="状态：" prop="rightdetailStatus">
              <el-radio v-model="addfromson.rightdetailStatus" label="yes"
                >启用</el-radio
              >
              <el-radio v-model="addfromson.rightdetailStatus" label="no"
                >未启用</el-radio
              >
              <el-radio v-model="addfromson.rightdetailStatus" label="noopen"
                >未开放</el-radio
              >
            </el-form-item>
            <el-form-item label="排序：" prop="rightdetailSort">
              <el-input
                size="mini"
                v-model.number="addfromson.rightdetailSort"
              ></el-input>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item prop="lockStatus" label="解锁状态：">
              <el-radio v-model="addfromson.lockStatus" label="yes"
                >解锁</el-radio
              >
              <el-radio v-model="addfromson.lockStatus" label="no"
                >未解锁</el-radio
              >
            </el-form-item>
          </div>

          <div style="display: flex">
            <el-form-item
              v-if="addfromson.lockStatus == 'no'"
              label="未解锁文案："
            >
              <el-input
                style="width: 194px"
                v-model.number="addfromson.lockTitle"
              ></el-input>
            </el-form-item>
            <el-form-item v-if="addfromson.lockStatus == 'no'" label="跳转卡id">
              <el-select
                filterable
                v-model="addfromson.jumpCardId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in tableDataidLIst"
                  :key="item.id"
                  :label="item.cardName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="图标：">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :action="imgHttpUrl"
              :on-success="rightdetailIconSuccess"
              list-type="picture-card"
              :on-exceed="handleExceed"
              :headers="header"
              :data="multipartFileIcon"
            >
              <!-- :before-upload="beforeAvatarUpload" -->
              <img
                v-if="addfromson.imageUrl"
                :src="addfromson.imageUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div style="margin-left: 45%">
          <el-button type="primary" @click="sonband('addfromson')"
            >绑定</el-button
          >
        </div>
      </el-dialog>
      <div>
        <el-button type="primary" @click="sonadd('addfromson')">新增</el-button>
      </div>
      <el-table
        :data="fatherTableData"
        class="account_table"
        size="small"
        border
        :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }"
        style="margin: 40px 0 10px 20px; width: 95%"
      >
        <el-table-column prop="id" label="权益id" align="cneter">
        </el-table-column>
        <el-table-column prop="rightdetailName" label="权益名称">
        </el-table-column>
        <el-table-column prop="rightdetailTitle" label="权益小标题" width="150">
        </el-table-column>
        <el-table-column prop="rightdetailIntroduce" label="权益介绍">
        </el-table-column>
        <el-table-column prop="icon" label="图标">
          <template slot-scope="scope">
            <img :src="baseURL + scope.row.icon" width="40" height="40" />
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="单位"></el-table-column>
        <el-table-column prop="number" label="次数"></el-table-column>

        <el-table-column label="状态">
          <template
            slot-scope="scope"
          >
            <template v-if="scope.row.rightdetailStatus == 'yes'"
              >启用</template
            >
            <template v-if="scope.row.rightdetailStatus == 'no'"
              >未启用</template
            >
            <template v-if="scope.row.rightdetailStatus == 'noopen'"
              >未开放</template
            >
            <template v-if="scope.row.rightdetailStatus == 'del'"
              >删除</template
            >
          </template>
        </el-table-column>  
        <el-table-column label="权益类型">
          <template slot-scope="scope">
            <template v-if="scope.row.rightdetailType == 'coupon'"
              >优惠卷</template
            >
            <template v-if="scope.row.rightdetailType == 'service'"
              >服务卷</template
            >
            <template v-if="scope.row.rightdetailType == 'insurance'"
              >保险</template
            >
             <template v-if="scope.row.rightdetailType == 'vipLoungeAndvipChannel'"
              >vip通道贵宾厅</template
            >
             <template v-if="scope.row.rightdetailType == 'delayCard'"
              >延误关怀</template
            >
             <template v-if="scope.row.rightdetailType == 'reserveService'"
              >预订服务</template
            >
          </template>
        </el-table-column>
        <el-table-column prop="adminName" label="修改人"></el-table-column>
        <el-table-column prop="updateTime" label="修改时间"></el-table-column>

        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              style="margin-right: 10px"
              @click="fathereditmethod(scope.row)"
              >修改</el-button
            >
            <!-- <el-popconfirm
              title="确定执行该操作吗?"
              @confirm="modifybanksrepeat"
            > -->
            <el-button
              type="primary"
              slot="reference"
              size="mini"
              @click="fatherdelmethod(scope.row)"
              >删除</el-button
            >

            <!-- <el-button type="primary" size="mini" @click="pagehref">维护卡权益</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog
      title="提示"
      :visible.sync="delfatherDialogVisible"
      width="30%"
      center
    >
      <span>确认删除卡权益吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delfatherDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifybanksrepeat">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "card.vue",
  data() {
    return {
      delfatherDialogVisible: false,
      sondelId: "",
      imgHttpUrl: this.$imgHttpUrl,

      addfromson: {
        id: "",
        cardId: "",
        rightdetailId: "",
        number: "",
        lockStatus: "yes",
        lockTitle: "",
        jumpCardId: "",
        rightdetailName: "",
        rightdetailTitle: "",
        rightdetailIntroduce: "",
        icon: "",
        unit: "",
        rightdetailStatus: "",
        relatedId: "",
        rightdetailType: "",
        updateimageUrl: "",
        imageUrl: "",
        rightdetailSort: "",
        rightdetailRule: "",
      },
      addfromsonrules: {
        number: [{ required: true, message: "请输入", trigger: "blur" }],

        lockStatus: [{ required: true, message: "请选择", trigger: "change" }],
        rightdetailName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        rightdetailTitle: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        rightdetailIntroduce: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        unit: [{ required: true, message: "请选择", trigger: "change" }],
        rightdetailStatus: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        rightdetailType: [
          { required: true, message: "请选择", trigger: "change" },
        ],

        relatedId: [{ required: true, message: "请选择", trigger: "change" }],
        jumpCardId: [{ required: true, message: "请选择", trigger: "change" }],
        lockTitle: [{ required: true, message: "请输入", trigger: "blur" }],
        rightdetailSort: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        rightdetailRule: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
      },
      // 权益类型
      rightdetailList: [
        {
          value: "coupon",
          label: "优惠卷",
        },
        {
          value: "service",
          label: "服务卷",
        },
        {
          value: "insurance",
          label: "保险",
        },
        {
          value: "vipLoungeAndvipChannel",
          label: "vip通道贵宾厅",
        },

        {
          value: "delayCard",
          label: "延误关怀",
        },
        {
          value: "reserveService",
          label: "预订服务",
        },
      ],
      // 父子弹窗
      outerVisible: false,
      innerVisible: false,
      // 父列表数据
      fatherTableData: [],
      // 子下拉框
      // sonTableData: [],

      selectData: {
        cardName: "",
        cardStatus: "yes",
      },
      //优惠券列表
      relatedIdList: [],
      delId: "",
      tableDataidLIst: [],
      addfrom: {
        id: "",
        cardName: "",
        cardBackdropImage: "",
        cardCoverImage: "",
        cardIntroduce: "",
        cardNameFontColor: "",
        cardOtherFontColor: "",
        gradeBackdropColor: "",
        gradeFontColor: "",
        cardPrice: "",
        continuousCardPrice: "",
        cardGrade: "",
        cardValidDate: "365",
        cardStatus: "yes",
        upcardBackdropImage: "",
        upcardCoverImage: "",
        giveawayStatus: "no",
      },
      correspondList: [],
      addfromrules: {
        cardName: [{ required: true, message: "请输入", trigger: "blur" }],
        cardIntroduce: [{ required: true, message: "请输入", trigger: "blur" }],
        cardNameFontColor: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        cardOtherFontColor: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        gradeBackdropColor: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        gradeFontColor: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        cardPrice: [{ required: true, message: "请输入", trigger: "blur" }],
        continuousCardPrice: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        cardGrade: [{ required: true, message: "请输入", trigger: "blur" }],
        cardValidDate: [{ required: true, message: "请输入", trigger: "blur" }],
        cardStatus: [{ required: true, message: "请选择", trigger: "change" }],
        giveawayStatus: [
          { required: true, message: "请选择", trigger: "change" },
        ],
      },
      header: {
        token: document.cookie.split("; ")[0].split("=")[1],
      },
      delDialogVisible: false,
      // 图片请求头
      multipartFile: { type: "cradbackImg" },
      multipartFileIcon: { type: "rightdetaiicon" },
      baseURL: localStorage.getItem("baseUrl"),

      centerDialogVisible: false, //弹框按钮
      imgmore: "", //图片显隐的地方
      color1: "#409EFF",
      color2: "#8C366E",
      color3: "#73C991",

      radio: 1,
      tableData: [
        { orderId: "111", applyTime: "111", status: "111", bankname: "111" },
      ],
    };
  },
  methods: {
    rightdetailIconSuccess(res, file) {
      this.addfromson.imageUrl = this.baseURL + res.data[0];
      this.addfromson.updateimageUrl = res.data[0];
      console.log(res, file, this.addfromson.imageUrl);
    },
    fathereditmethod(row) {
      console.log(row);
      let id = row.id;
      this.addfromson.id = id;
      this.innerVisible = !this.innerVisible;
      this.$axios
        .getCardBindRightsInfo({
          id: row.id,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.addfromson = res.data;
            this.addfromson.updateimageUrl = res.data.icon;
            this.addfromson.imageUrl = this.baseURL + res.data.icon;
          }
        });
    },
    // 修改权益次数
    getupdCardBindRights() {
      this.$axios
        .getupdCardBindRights({
          id: this.addfromson.id,
          number: this.addfromson.number,
          lockStatus: this.addfromson.lockStatus,
          cardId: this.addfromson.cardId,
          lockTitle: this.addfromson.lockTitle,
          jumpCardId: this.addfromson.jumpCardId,
          rightdetailName: this.addfromson.rightdetailName,
          rightdetailTitle: this.addfromson.rightdetailTitle,
          rightdetailIntroduce: this.addfromson.rightdetailIntroduce,
          unit: this.addfromson.unit,
          rightdetailStatus: this.addfromson.rightdetailStatus,
          rightdetailType: this.addfromson.rightdetailType,
          relatedId: this.addfromson.relatedId,
          icon: this.addfromson.updateimageUrl,
          rightdetailSort: this.addfromson.rightdetailSort,
          rightdetailRule: this.addfromson.rightdetailRule,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.$message({
              message: "成功",
              type: "success",
            });
            this.innerVisible = !this.innerVisible;

            this.getCardBindRights();
          }
        });
    },

    // 权益删除点击事件
    fatherdelmethod(row) {
      this.sondelId = row.id;
      this.delfatherDialogVisible = !this.delfatherDialogVisible;
    },
    modifybanksrepeat() {
      this.$axios
        .getdelCardBindRights({
          id: this.sondelId,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.getCardBindRights();
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.delfatherDialogVisible = !this.delfatherDialogVisible;
          }
        });
    },
    // 绑定按钮
    sonband(row) {
      this.$refs[row].validate((valid) => {
        if (valid) {
          if (this.addfromson.id == "") {
            this.getaddCardBindRights();
          } else {
            this.getupdCardBindRights();
          }
        }
      });
    },
    clearFromData() {
      this.addfrom["id"] = "";
      this.addfrom["cardName"] = "";
      this.addfrom["cardCoverImage"] = "";
      this.addfrom["cardBackdropImage"] = "";

      this.addfrom["cardIntroduce"] = "";
      this.addfrom["cardNameFontColor"] = "";
      this.addfrom["cardOtherFontColor"] = "";
      this.addfrom["gradeBackdropColor"] = "";
      this.addfrom["gradeFontColor"] = "";
      this.addfrom["cardPrice"] = "";
      this.addfrom["continuousCardPrice"] = "";
      this.addfrom["cardGrade"] = "";
      this.addfrom["cardValidDate"] = "";
      this.addfrom["cardStatus"] = "";
      this.addfrom["upcardBackdropImage"] = "yes";
      this.addfrom["upcardCoverImage"] = "";
    },

    getaddCardBindRights() {
      this.$axios
        .getaddCardBindRights({
          cardId: this.addfromson.cardId,
          number: this.addfromson.number,
          lockStatus: this.addfromson.lockStatus,
          lockTitle: this.addfromson.lockTitle,
          jumpCardId: this.addfromson.jumpCardId,
          rightdetailName: this.addfromson.rightdetailName,
          rightdetailTitle: this.addfromson.rightdetailTitle,
          rightdetailIntroduce: this.addfromson.rightdetailIntroduce,
          unit: this.addfromson.unit,
          rightdetailStatus: this.addfromson.rightdetailStatus,
          rightdetailType: this.addfromson.rightdetailType,
          relatedId: this.addfromson.relatedId,
          icon: this.addfromson.updateimageUrl,
          rightdetailSort: this.addfromson.rightdetailSort,
          rightdetailRule: this.addfromson.rightdetailRule,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.$message({
              message: "成功",
              type: "success",
            });
            this.innerVisible = !this.innerVisible;

            this.getCardBindRights();
          }
        });
    },
    // //子下拉框
    // getsonList() {
    //   this.$axios
    //     .getCardRightdetailList({
    //       rightdetailStatus: "yes",
    //       pageSize: "20000",
    //       pageNo: "1",
    //     })
    //     .then((res) => {
    //       console.log(res);
    //       if (res.code == "00000") {
    //         this.sonTableData = res.data.records;
    //       }
    //     });
    // },
    // 父按钮
    sonadd(formName) {
      this.addfromson.id = "";
      this.addfromson.number = "";
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });

      this.innerVisible = true;
    },
    toggleRowSelection(item, index) {
      console.log(item, index);
    },
    pagehref(row) {
      this.addfromson.cardId = row.id;
      // this.getsonList();

      this.getCardBindRights();
      this.outerVisible = true;
    },
    getCardBindRights() {
      this.$axios
        .getCardBindRights({
          id: this.addfromson.cardId,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.fatherTableData = res.data;
          }
        });
    },
    //保存按钮
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.addfrom.id == "") {
            this.getaddCard();
          } else {
            this.getupdCard();
          }
        } else {
        }
      });

      // this.centerDialogVisible = !this.centerDialogVisible; //取反操作
    },
    delmethod(row) {
      // this.$router.push("/flight/maintenance"); //点击维护卡权益按钮 跳转到维护卡权益页面
      this.delId = row.id;
      this.delDialogVisible = !this.delDialogVisible;
    },
    // 删除确定按别扭
    delCardRightd() {
      this.$axios
        .getdelCard({
          id: this.delId,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.immediatelyquery();
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.delDialogVisible = !this.delDialogVisible;
          }
        });
    },
    cardCoverImageSuccess(res, file) {
      this.addfrom.cardCoverImage = this.baseURL + res.data[0];
      this.addfrom.upcardCoverImage = res.data[0];
      console.log(res, file, this.addfrom.cardCoverImage);
    },
    cardBackdropImageSuccess(res, file) {
      this.addfrom.cardBackdropImage = this.baseURL + res.data[0];
      this.addfrom.upcardBackdropImage = res.data[0];
      console.log(res, file, this.addfrom.imageUrl);
    },

    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    // 查询按钮
    immediatelyquery() {
      this.$axios
        .getCardList({
          cardStatus: this.selectData.cardStatus,
          cardName: this.selectData.cardName,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.tableData = res.data;
            if (this.selectData.cardStatus == "yes") {
              this.tableDataidLIst = res.data;
            }
          }
        });
    },
    //修改点击事件
    editMethod(row) {
      this.addfrom.id = row.id;
      this.$axios
        .getCardInfo({
          id: this.addfrom.id,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.addfrom.cardName = res.data.cardName;
            this.addfrom.upcardBackdropImage = res.data.cardBackdropImage;
            this.addfrom.cardBackdropImage =
              this.baseURL + res.data.cardBackdropImage;
            this.addfrom.upcardCoverImage = res.data.cardCoverImage;
            this.addfrom.cardCoverImage =
              this.baseURL + res.data.cardCoverImage;
            this.addfrom.cardIntroduce = res.data.cardIntroduce;
            this.addfrom.cardNameFontColor = res.data.cardNameFontColor;
            this.addfrom.cardOtherFontColor = res.data.cardOtherFontColor;
            this.addfrom.gradeBackdropColor = res.data.gradeBackdropColor;
            this.addfrom.gradeFontColor = res.data.gradeFontColor;
            this.addfrom.cardPrice = res.data.cardPrice;
            this.addfrom.continuousCardPrice = res.data.continuousCardPrice;
            this.addfrom.cardGrade = res.data.cardGrade;
            this.addfrom.cardValidDate = res.data.cardValidDate;
            this.addfrom.cardStatus = res.data.cardStatus;
            this.centerDialogVisible = !this.centerDialogVisible;
            if (res.data.giveawayStatus == null) {
              this.addfrom.giveawayStatus = "no";
            } else {
              this.addfrom.giveawayStatus = "yes";
            }
          }
        });
    },
    // 修改
    getupdCard() {
      this.$axios
        .getupdCard({
          id: this.addfrom.id,
          cardName: this.addfrom.cardName,
          cardBackdropImage: this.addfrom.upcardBackdropImage,
          cardCoverImage: this.addfrom.upcardCoverImage,
          cardIntroduce: this.addfrom.cardIntroduce,
          cardNameFontColor: this.addfrom.cardNameFontColor,
          cardOtherFontColor: this.addfrom.cardOtherFontColor,
          gradeBackdropColor: this.addfrom.gradeBackdropColor,
          gradeFontColor: this.addfrom.gradeFontColor,
          cardId: this.addfromson.cardId,

          cardPrice: this.addfrom.cardPrice,
          continuousCardPrice: this.addfrom.continuousCardPrice,
          cardGrade: this.addfrom.cardGrade,
          cardValidDate: this.addfrom.cardValidDate,
          cardStatus: this.addfrom.cardStatus,
          giveawayStatus: this.addfrom.giveawayStatus,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.immediatelyquery();
            this.$message({
              message: "成功",
              type: "success",
            });
            this.centerDialogVisible = !this.centerDialogVisible;
          }
        });
    },
    // 添加
    getaddCard() {
      this.$axios
        .getaddCard({
          cardName: this.addfrom.cardName,
          cardBackdropImage: this.addfrom.upcardBackdropImage,
          cardCoverImage: this.addfrom.upcardCoverImage,
          cardIntroduce: this.addfrom.cardIntroduce,
          cardNameFontColor: this.addfrom.cardNameFontColor,
          cardOtherFontColor: this.addfrom.cardOtherFontColor,
          gradeBackdropColor: this.addfrom.gradeBackdropColor,
          gradeFontColor: this.addfrom.gradeFontColor,
          cardId: this.addfromson.cardId,
          cardPrice: this.addfrom.cardPrice,
          continuousCardPrice: this.addfrom.continuousCardPrice,
          cardGrade: this.addfrom.cardGrade,
          cardValidDate: this.addfrom.cardValidDate,
          cardStatus: this.addfrom.cardStatus,
          giveawayStatus: this.addfrom.giveawayStatus,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.immediatelyquery();
            this.$message({
              message: "成功",
              type: "success",
            });
            this.centerDialogVisible = !this.centerDialogVisible;
          }
        });
    },

    //添加按钮
    imediateadd() {
      this.clearFromData();
      // this.addfrom={}

      this.centerDialogVisible = !this.centerDialogVisible;
    },

    // 修改按钮
    imediateupp() {
      this.centerDialogVisible = !this.centerDialogVisible; //将点击事件取反操作
    },
    //添加按钮
    getCouponTypeList() {
      this.$axios
        .getCouponTypeList({
          couponStatus: "yes",
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.relatedIdList = res.data;
          }
        });
    },
    // 权益类型点击事件
    watchrightdetailStatus() {
      console.log(1);
      this.addfromson.relatedId = "";
    },
    // 保险列表
    getInsuranceList() {
      this.$axios.getInsuranceList().then((res) => {
        if (res.code == "00000") {
          this.correspondList = res.data.map((item) => {
            let obj = {
              id: item.id,
              name: item.insuranceName,
            };
            return obj;
          });
        }
      });
    },
  },
  mounted() {
    this.imgHttpUrl = this.$imgHttpUrl;
    this.baseURL = localStorage.getItem("baseUrl");
    console.log(this.baseURL);
    this.immediatelyquery();
    this.getCouponTypeList();
    this.getInsuranceList();
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>